<template>
  <div :style="{'width': percent + '%'}" :class="{show: show, error: error}">
  </div>
</template>
<script>
export default {
  data() {
    return {
      percent: 0,
      show: false,
      error: false
    }
  },
  methods: {
    start() {
      this.show = true
      this.error = false
      this._timer = setInterval(() => {
        this.percent++
      }, 100)
    },
    finish() {
      this.show = false
      this.percent = 100
      clearInterval(this._timer)
      this._timer = null
    },
    fail() {
      this.error = true
      this.percent = 100
    }
  }
}
</script>
